<template>
  <teleport to="body">
    <div v-if="visible" class="auth-modal-overlay" @click.self="closeModal">
      <div class="auth-modal">
        <div class="auth-modal-header">
          <div class="auth-tabs">
            <div 
              :class="['auth-tab', activeTab === 'login' ? 'active' : '']" 
              @click="activeTab = 'login'"
            >
              登录
            </div>
            <div 
              :class="['auth-tab', activeTab === 'register' ? 'active' : '']" 
              @click="activeTab = 'register'"
            >
              注册
            </div>
          </div>
          <div class="close-btn" @click="closeModal">×</div>
        </div>
        
        <div class="auth-modal-body">
          <!-- 登录表单 -->
          <form v-if="activeTab === 'login'" @submit.prevent="handleLogin">
            <div v-if="loginError" class="error-message">{{ loginError }}</div>
            
            <div class="form-group">
              <label>用户名</label>
              <input 
                type="text" 
                v-model="loginForm.username" 
                placeholder="请输入用户名" 
                required
                :disabled="loading"
              />
            </div>
            <div class="form-group">
              <label>密码</label>
              <input 
                type="password" 
                v-model="loginForm.password" 
                placeholder="请输入密码" 
                required
                :disabled="loading"
              />
            </div>
            <div class="form-actions">
              <button type="submit" class="btn-primary" :disabled="loading">
                <span v-if="loading">登录中...</span>
                <span v-else>登录</span>
              </button>
            </div>
          </form>
          
          <!-- 注册表单 -->
          <form v-if="activeTab === 'register'" @submit.prevent="handleRegister">
            <div v-if="registerError" class="error-message">{{ registerError }}</div>
            
            <div class="form-group">
              <label>用户名</label>
              <input 
                type="text" 
                v-model="registerForm.username" 
                placeholder="请输入用户名" 
                required
                :disabled="loading"
              />
            </div>
            <div class="form-group">
              <label>邮箱</label>
              <input 
                type="email" 
                v-model="registerForm.email" 
                placeholder="请输入邮箱" 
                required
                :disabled="loading"
              />
            </div>
            <div class="form-group">
              <label>密码</label>
              <input 
                type="password" 
                v-model="registerForm.password" 
                placeholder="请输入密码" 
                required
                :disabled="loading"
              />
            </div>
            <div class="form-group">
              <label>确认密码</label>
              <input 
                type="password" 
                v-model="registerForm.confirmPassword" 
                placeholder="请再次输入密码" 
                required
                :disabled="loading"
              />
            </div>
            <div class="form-actions">
              <button type="submit" class="btn-primary" :disabled="loading">
                <span v-if="loading">注册中...</span>
                <span v-else>注册</span>
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </teleport>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { login, register, setToken } from '../api/auth';

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(['update:visible', 'login-success', 'register-success']);

const activeTab = ref('login');
const loading = ref(false);
const loginError = ref('');
const registerError = ref('');

const loginForm = reactive({
  username: '',
  password: ''
});

const registerForm = reactive({
  username: '',
  email: '',
  password: '',
  confirmPassword: ''
});

const closeModal = () => {
  emit('update:visible', false);
  // 重置表单状态
  loginError.value = '';
  registerError.value = '';
  loginForm.username = '';
  loginForm.password = '';
  registerForm.username = '';
  registerForm.email = '';
  registerForm.password = '';
  registerForm.confirmPassword = '';
};

const handleLogin = async () => {
  try {
    loading.value = true;
    loginError.value = '';
    
    const result = await login(loginForm);
    
    if (result.success) {
      // 通知父组件登录成功
      emit('login-success', { 
        username: result.data.username || result.data.nickname,
        token: result.data.token
      });
      
      // 关闭弹窗
      closeModal();
    } else {
      loginError.value = result.message || '登录失败，请重试';
    }
  } catch (error) {
    loginError.value = '登录请求失败，请重试';
    console.error('登录失败:', error);
  } finally {
    loading.value = false;
  }
};

const handleRegister = async () => {
  try {
    // 验证两次密码是否一致
    if (registerForm.password !== registerForm.confirmPassword) {
      registerError.value = '两次输入的密码不一致';
      return;
    }
    
    loading.value = true;
    registerError.value = '';
    
    const result = await register({
      username: registerForm.username,
      email: registerForm.email,
      password: registerForm.password
    });
    
    if (result.success) {
      // 通知父组件注册成功
      emit('register-success', { 
        username: result.data.username || result.data.nickname,
        email: result.data.email,
        token: result.data.token
      });
      
      // 关闭弹窗
      closeModal();
    } else {
      registerError.value = result.message || '注册失败，请重试';
    }
  } catch (error) {
    registerError.value = '注册请求失败，请重试';
    console.error('注册失败:', error);
  } finally {
    loading.value = false;
  }
};
</script>

<style scoped>
.auth-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.auth-modal {
  width: 420px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  animation: modal-fade-in 0.3s ease;
  position: relative;
  z-index: 10000;
}

.auth-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #eee;
}

.auth-tabs {
  display: flex;
  gap: 20px;
}

.auth-tab {
  font-size: 16px;
  color: #666;
  cursor: pointer;
  padding-bottom: 8px;
  position: relative;
}

.auth-tab.active {
  color: #00c25e;
  font-weight: 500;
}

.auth-tab.active::after {
  content: '';
  position: absolute;
  bottom: -16px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #00c25e;
}

.close-btn {
  font-size: 24px;
  color: #999;
  cursor: pointer;
  line-height: 1;
}

.auth-modal-body {
  padding: 24px;
}

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}

.form-group input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  transition: border-color 0.3s;
}

.form-group input:focus {
  border-color: #00c25e;
  outline: none;
}

.form-group input:disabled {
  background-color: #f5f5f5;
  cursor: not-allowed;
}

.error-message {
  background-color: #fff1f0;
  color: #f56c6c;
  padding: 8px 12px;
  border-radius: 4px;
  margin-bottom: 16px;
  font-size: 14px;
  border: 1px solid #fde2e2;
}

.form-actions {
  margin-top: 24px;
}

.form-tips {
  margin-top: 12px;
  text-align: center;
  font-size: 12px;
  color: #999;
}

.btn-primary {
  width: 100%;
  padding: 12px;
  background-color: #00c25e;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s;
}

.btn-primary:hover:not(:disabled) {
  background-color: #00ae53;
}

.btn-primary:disabled {
  background-color: #a8e0c2;
  cursor: not-allowed;
}

@keyframes modal-fade-in {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style> 